import React from 'react'
import { Menu, Icon } from 'antd';
import { useSelector } from 'react-redux'
import { StoreType } from '../../../../store/types'
import { RouteComponentProps, withRouter } from 'react-router-dom'
// import styles from './index.module.scss'
import { ClickParam } from 'antd/lib/menu';

interface PropsInterface extends RouteComponentProps { }

const MenuCom = (props: PropsInterface) => {

  // 左侧menu数据
  const menuData: any = useSelector((store: StoreType) => store.auth.pages)
  const testNum: any = useSelector((store: StoreType) => store.app.testNum)

  const menuClick = (item: ClickParam) => {
    props.history!.push(item.key)
  }

  const getMenu = (item: any) => {
    return (item.children && item.children.length > 0) ?
      <Menu.SubMenu
        key={item.path}
        title={
          <span>
            <Icon type="menu" />
            <span>{item.title}</span>
          </span>
        }
      >
        {
          item.children.map((item: any) => {
            return getMenu(item)
          })
        }
      </Menu.SubMenu>
      :
      <Menu.Item key={item.path}>
        <Icon type="appstore" />
        <span>{item.title}</span>
      </Menu.Item>
  }

  return (
    <div>
      <Menu onClick={menuClick} theme="dark" mode="inline" defaultSelectedKeys={['4']}>
        {
          menuData.map((item: any) => {
            return getMenu(item)
          })
        }
      </Menu>
      <span style={{ color: "#fff" }}>{ testNum }</span>
    </div>
  )
}

export default withRouter<PropsInterface>(MenuCom)
